<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* body {
            height: 3000px;
        } */
    </style>
</head>

<body>
    <input type="text" placeholder="输入内容">
    <!-- settimeout是2秒执行，但是只执行一次，setinreval是2秒执行，但是执行多次 -->


    <!-- 总结
        1.防抖：间隔时间内多次触发事件，以最后一次为准
           1.1应用场景：鼠标的移入移出，键盘输入框  
        
        2.节流：间隔时间内只触发一次
           1.1应用场景：高频事件 鼠标移动，滚动条事件

        3.防抖和节流相同点
           1.1都是为了优化函数执行频率，提高网页性能
        
        4.防抖和节流不同点
           1.1防抖：优化用户主动触动的事件，多次触发以最后一次为准
           1.2节流：优化事件本身触发的频率，间隔时间只执行一次
    -->


    <!-- 防抖 -->
    <script>
        // console.log(c)
        // var c=10
        // 防抖：在间隔时间内多次触发事件，以最后一次为准
        // 思路：1.声明一个变量来存储定时器的id
        //2.每一次触发事件的时候，先不触发，开启定时器，间隔事件之后再触发
        //3.如果在间隔时间内，用户触发了其他事件，则结束上一次定时器，以最后一次为准


        //     let timerId = null;
        //     console.log("id外面",timerId)
        //     window.onresize = function(){
        // // 其实这个null是没有走进setTimeout的，
        // // 这里能够打印timerId为null是因为内部可以访问外部，但是外部不能访问内部 

        //         console.log("onresize下面一点点",timerId)
        //         timerId && clearTimeout(timerId);
        //         console.log("计算器下面",timerId)
        //         timerId = setTimeout(() => {
        //            console.log("尺寸变化")
        //            console.log("定时器里面",timerId);
        //        }, 2000);
        //    }



        // var time = null;
        // window.onresize = function(){
        //     console.log("asdfgthj");
        //     time = setTimeout(() => {
        //         console.log(3456789)
        //     }, 2000);
        // }


        // 防抖搜索框
    
        // var timeId = null
        // document.querySelector("input").oninput = function(){
        //     // console.log(this.value);
        //     console.dir(this)
        //     var that = this.value
        //     timeId && clearTimeout(timeId);
        //     // 这里this指向是有问题的，只是我用的静态函数，就指向上一级
        //     timeId = setTimeout(function(){
        //         console.log(that);
        //     },1000)
        // }
    




        // 节流
        // 节流：间隔时间内函数只被触发一次；解决高频事件触发的问题，降低触发的频率
        // 高频事件，触发频率最高的事件 onmousemove,onscoll
        // let i = null;
        // window.onmousemove = function(){
        //     i++;
        //     console.log("鼠标移动的次数"+ i);
        // }

        // let j = 1;
        // window.onscroll = function(){
        //     j++;
        //     console.log("鼠标滚动条触发的次数"+ j);
        // }


        //    // 监听是未来式的，就是我外面的已经执行完了，但是我里面可以去改变它，
        // 改变了其实的外面的let time = null;中的time变化了，但是我在内部是可以监听到的，在控制台打印a是可以的
        // let time = null;
        // let i = 1;
        // console.log("外面",time)//null
        // window.onmousemove = function(){
        //     // console.log("a",a);
        //     // console.log(b)

        //     console.log("time",time)
        //     let currentTime = Date.now();

        //     // console.log("if上面",time);
        //     if(currentTime - time >= 2000){
        //         i++;
        //         console.log("鼠标移动的次数"+ i);
        //         time = currentTime;
        //         // let  b = 7890;

        //     }
        //     // var a = 10
        // }
    </script>
</body>

</html>